A web page is an electronic document created using a mark-up language, such as hypertext markup language (HTML) that is part of a group of Hypertext documents available on the World Wide Web. A web page includes a perceived information set, which is rendered by a web browser. The web page further includes an internal information set, which includes information that facilitates rendering of the web page and information that provides a set of functionalities to the web page. It is possible to store a part of the perceived and internal information sets in one or more files other than the web page (“external files”). When a part of the perceived information sets and internal information sets is stored in one or more external files, the web page includes references to such external files.
A web browser is a software application, which runs on a web client, and retrieves a web page located on the web server and renders the web page for display to an end user. During the rendering process, the web browser parses the web page to determine whether one or more external files are referenced in the web page. If an external file is referenced in the web page, the web browser sends a request to the web server and the web server provides a response including the requested external file. The request from the web browser and the response from the web server are communicated in accordance with a standard data transfer protocol, such as Hypertext Transfer Protocol (HTTP). This process is repeated for each external file referenced in the web page.
The web browser may not begin the display of the web page until acquisition of all the external files is completed. For example, if the external files include information related to style, which is to be applied to the entire web page, the web page is not displayed until all the external files are received. The time elapsed between the instant a web browser initiates a request for a web page and the instant a web page is completely displayed in the web browser is referred to as web page response time or latency. It is apparent that an increase in the number of external files referenced in a web page undesirably increases the web page latency.
In some cases, it is not possible to include all the desired information in a web page and hence, the information is stored in one or more external files, which are referenced in the web page. In certain other cases, (e.g., information related to style and scripts), it is a matter of design optimization that governs whether the information is to be in-lined (i.e. included) in the web page or defined in one or more external files.
The web pages may be designed to provide consistent user interface screens by including a reference to a style sheet. A style sheet, such as a cascading style sheet (CSS), specifies the presentation of each user interface element during the rendering process. Similarly, the web pages may provide a common functionality by including a reference to a script. A script is a program code defined using an interpreted scripting language, such as JavaScript. The style sheets and the scripts may be in-lined in the web page. In an embodiment, style sheets and scripts may be defined in external files and included by reference in the web page.
The style sheets and the scripts in-lined in the web page get downloaded every time the web page is requested. Although this approach does not increase the number of HTTP requests from the web browser to render the web page, this approach increases the size of the web page and hence, creates network bandwidth overheads. Further, this approach leads to several problems in code maintenance and change management.
The use of external files (e.g., style sheets and scripts), offers several advantages from a programming and design perspective. It facilitates a modular design approach that provides a distinction between, content, functionality, and appearance. The modular design leads to reusability of code, facile testing and debugging, easier maintenance, and effective change management. Further, the external files may be stored in the web browser cache for future use. Thus, the external files may be locally retrieved from the web browser cache instead of remotely retrieving the external files from the web server. However, in case the external files referenced in a web page are not stored in the web browser cache, each external file is individually retrieved from the web server.
The HTTP/1.1 specification mentions that a web browser should not download more than two components in parallel per hostname. Due to this limitation in the specification, a web browser is usually prevented from initiating parallel downloads for the external files; and at best, a web browser initiates download of only two external files in parallel. Thus, for each external file, the web browser sends an HTTP request to the web server, then waits for the request to reach the web server, the web server to process the request, and the response (including the file content itself) to reach the web browser, before requesting another external file.
It has been estimated that the average number of external files referenced in a web page has reached about 50. It is estimated that an HTTP request has an average round-trip latency of 200 milliseconds. Thus, a web page with references to about 40 external files introduces a latency of about 4 seconds. The HTTP request-response latencies now dominate the web page response time to the extent that the actual download time to retrieve the web page and referenced external files is only about 15-20% of the total response time of the web page and 80-85% of the total response time of the web page is attributable to HTTP request-response latencies.
In light of the foregoing, there is a need in the art for a system and method to optimize the data communication between a web browser and a web server such as to facilitate a modular design approach, while reducing the requests generated by a web browser for retrieval of external files from the web server.